<template>
  <van-row class="startup">
    <van-button @click="onSkip" size="mini" round class="btn-skip">跳过 {{countTimer}}</van-button>
    <van-image
     src="https://img.yzcdn.cn/vant/cat.jpeg" />
     <h3 style="text-align: center; font-size: 20px; font-weight: 600;">YE MEI 我的保养私人医生</h3>
  </van-row>
</template>

<script>
export default {
  beforeRouteLeave(to, from, next) {
    // 重新进入则回到首页
    localStorage.setItem('currentTabIndex', 0)
    next()
  },
  data() {
    return {
      countTimer: 3,   // 启动页倒计时
      isSkip: false,  // 跳过/倒计时结束
      isFirstOpenApp: false, // 是否是第一次登录
      startUpDowmClock: '', // 倒计时对象
    }
  },
  mounted() {
    // 读取缓存记录, 判断是否是第一次登录app
    // TODO
    this.countDown()
  },
  methods: {
    onSkip() {
      this.$toast('跳过')
      this.isSkip = true
      clearInterval(this.startUpDowmClock)
    },
    countDown() {
      // 启动页倒计时
      if (this.isSkip === true) { return }
      this.startUpDowmClock = setInterval(()=>{
        this.isSkip = false
        this.countTimer--
        if (this.countTimer < 1) {
          this.isSkip = true
          clearInterval(this.startUpDowmClock)
        }
      }, 1000)
    }
  },
  watch: {
    isSkip(val) {
      if (val===true) {
        setTimeout(()=>{
          this.$router.replace({path:'/home'})
        },1000)
      }
    }
  }
}
</script>

<style lang="scss">
.startup {
  width: 100%;
  height: 100%;
  position: relative;
  .btn-skip {
    position: absolute;
    right: 34px;
    top: 36px;
    z-index: 99;
    background: rgba(238, 238, 238, 0.5);
  }
}
</style>